<template>
	<z-paging ref="paging" bgColor="#F5F6FA" class="content" v-model="dataList" @query="queryList">
		<template #top>
			<view class="top-box" style="background-color: #fff;">
				<view class="box " style="padding-bottom: 20rpx;">
					<up-search :show-action="true" bgColor="#F7F8FA" placeholder="关键词搜索" actionText="搜索" :animation="true"></up-search>
					<!-- <up-tabs :scrollable="false" 
						:activeStyle="{
							color:'#F5493D',
							fontWeight:'Bold',
							fontSize:'30rpx'
						}"
						:inactiveStyle="{
							color:'#141311',
							fontSize:'30rpx'
						}"
						lineWidth="60rpx"
						lineHeight="6rpx"
						lineColor="#F5493D"
						@change="onTab"
						:list="tab"></up-tabs> -->
				</view>
			</view>
			
		</template>
		<view class="box list-box">
			<view class="item" v-for="(item,index) in dataList" @click="goDetails(item.id)">
				<view class="top">
					{{$u.timeFormat(item.add_time, 'yyyy-mm-dd hh:MM:ss')}}
					<!-- <view class="status"  v-if="item.crack_status==0">
						未破解
					</view>
					<view class="status on" v-else-if="item.crack_status==1">
						已破解
					</view>
					<view class="status off" v-else-if="item.crack_status==3">
						已失效
					</view>
					<view class="status on" v-else-if="item.crack_status==2">
						已经填写地址
					</view> -->
				</view>
				<view class="info">
					<view class="image">
						<image :src="item.productInfo[0].image" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="h1">
							{{item.productInfo[0].store_name}}
						</view>
						<view style="font-size:26rpx;margin-top:20rpx;">
							x{{item.product_num}}
						</view>
						<view class="p">
							已参与：<view class="num">{{item.joinUserList.length}}人</view>
						</view>
					</view>
				</view>
				<view class="time">
					<view class="left" >
						结束倒计时：
						<up-count-down v-if="item._end_time-Date.now()/1000>0" :time="(item._end_time-Date.now()/1000)*1000" format="HH:mm:ss"></up-count-down>
						<view v-else style="color:#838A99">已结束</view>
					</view>
					<view class="btn">
						查看详情
					</view>
				</view>
			</view>
		</view>
		
	</z-paging>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import {getLotterySelfListApi,getLotteryJoinListApi} from '/api/lottery.js'
	const paging=ref(null)
	const tab_i=ref(0)
	const tab=ref([
		{
			name:'全部',
			id:''
		},
		{
			name:'未破解',
			id:0
		},
		{
			name:'已破解',
			id:1
		},
		{
			name:'已失效',
			id:3
		}
	])
	const dataList=ref([]) 
	const type=ref(1)
	onLoad((obj)=>{
		type.value=obj.type==1?1:2
		uni.setNavigationBarTitle({
			title:obj.type==1?'我发起的谜奖':'我参与的谜奖'
		})
	})
	const onTab=(e)=>{
		console.log(e)
		tab_i.value=e.index
		paging.value.reload()
	}
	const queryList=async (pageNo, pageSize)=>{
		//请求接口数据
		let res='';
		if(type.value==1){//我发起的
			res=await getLotterySelfListApi({
				crack_status:tab.value[tab_i.value].id,
				limit:pageSize,
				page:pageNo
			})
		}else{//我参与的
			res=await getLotteryJoinListApi({
				crack_status:tab.value[tab_i.value].id,
				limit:pageSize,
				page:pageNo
			})
			
		}
		
		paging.value.complete(res.data.list);
	}
	const goDetails=(id)=>{
		if(type.value==2){
			uni.navigateTo({
				url:'../details?id='+id
			})
		}else{
			uni.navigateTo({
				url:'./details?id='+id
			})
		}
		
	}
</script>

<style lang="scss" scoped>
	.list-box{
		
		
		.item{
			background-color: #fff;
			padding:0 24rpx;
			margin-top:20rpx;
			border-radius: 20rpx;
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color:#9A9A9A;
				font-size:26rpx;
				padding:20rpx 0 16rpx 0;
				border-bottom: 1rpx solid #EDEDED;
				.status{
					padding:0 16rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: bold;
					line-height: 48rpx;
					background-color: #FFF2F0;
					color:#FF4A40;
					&.on{
						background-color: #EFF5FE;
						color:#199FFE;
					}
					&.off{
						background-color: #F5F6FA;
						color:#838A99;
					}
				}
			}
			.info{
				padding:28rpx 0;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #EDEDED;
				
				.image{
					width:160rpx;height:160rpx;
					border-radius: 12rpx;
					overflow: hidden;
					position: relative;
					image{
						width:100%;height:100%;display: block;
					}
					.icon{
						position: absolute;top:0;left:0;
						width:32rpx;height:32rpx;
					}
				}
				.text{
					flex:1;
					margin-left:20rpx;line-height: 1;
					.h1{
						font-weight: bold;
						font-size: 32rpx;
					}
					.money{
						display: flex;
						font-weight: bold;
						color:#F5493D;
						font-size: 32rpx;
						align-items: center;
						margin-top:28rpx;
						.em{
							font-size:22rpx;margin-left:6rpx;
						}
					}
					.p{
						color:#838A99;margin-top: 28rpx;
						display: flex;
						align-items: center;
						font-size: 28rpx;
						.num{
							color:#141311;
						}
					}
				}

			}
			.time{
				display: flex;justify-content: space-between;
				padding:20rpx 0;
				align-items: center;
				.left{
					display: flex;
					font-size: 28rpx;
					::v-deep{
						.u-count-down__text{
							color:#F5493D;line-height: 1;font-size:24rpx;font-weight: bold;
						}
					}
				}
				.btn{
					color:#838A99;
					border-radius: 40rpx;
					background-color: #F5F6FA;
					padding:0 24rpx;line-height: 68rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
